import 'package:flutter/material.dart';
import 'package:flutter_base/config/app_color.dart';
import 'package:flutter_base/pages/test_questions/test_questions_logic.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class SwipeScaleWidget extends StatelessWidget {
  const SwipeScaleWidget({super.key, required this.logic});
  final TestQuestionsLogic logic;

  @override
  Widget build(BuildContext context) {
    // 获取当前问题ID
    // final questionId = logic.currentQuestion?.id ?? 0;

    return Column(
      // mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 第一部分：指示器 (5/10)
        Obx(() {
          // 获取当前问题的评分值
          final currentValue = getCurrentValue();

          return Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                currentValue.toStringAsFixed(1),
                style: TextStyle(
                  fontSize: 60.sp,
                  fontWeight: FontWeight.w700,
                  color: AppColor.primary,
                ),
              ),
              Text(
                "/10",
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w400,
                  color: AppColor.color0C0A09.withOpacity(0.5),
                ),
              ),
            ],
          );
        }),

        SizedBox(height: 8.w),

        // 第二部分和第三部分：刻度数字和刻度线
        SizedBox(
          height: 76.w,
          width: double.infinity,
          child: Stack(
            alignment: Alignment.center,
            children: [
              // 中间固定的刻度指示器
              Container(
                width: 1.w,
                height: 76.w,
                color: AppColor.color0C0A09,
              ),

              // 可滚动的刻度和数字
              Builder(builder: (BuildContext context) {
                // 计算单个刻度的宽度
                final tickWidth = 8.w;
                // 计算每个数值占用的宽度（每个数值有10个刻度，精确到小数点后一位）
                final valueWidth = tickWidth * 10;
                // 计算内边距（屏幕宽度的一半）
                final padding = MediaQuery.of(context).size.width / 2;

                // 监听当前值变化，自动滚动到对应位置
                final ScrollController scrollController = ScrollController();

                // 使用Obx监听值变化
                return Obx(() {
                  // 获取当前值
                  final currentValue = getCurrentValue();

                  // 计算需要滚动到的位置
                  final targetPosition = currentValue * 10 * tickWidth;

                  // 确保UI构建完成后再滚动到初始位置
                  // 只在初始化或值变化时滚动
                  if (!scrollController.hasClients ||
                      (scrollController.hasClients &&
                          (scrollController.offset / tickWidth).round() / 10 !=
                              currentValue)) {
                    WidgetsBinding.instance.addPostFrameCallback((_) {
                      if (scrollController.hasClients) {
                        scrollController.animateTo(
                          targetPosition,
                          duration: Duration(milliseconds: 300),
                          curve: Curves.easeOut,
                        );
                      }
                    });
                  }

                  return NotificationListener<ScrollNotification>(
                    onNotification: (scrollNotification) {
                      // 获取当前问题ID
                      final questionId = logic.currentQuestion?.id ?? 0;

                      // 只在滚动结束时更新值
                      if (scrollNotification is ScrollEndNotification) {
                        // 计算当前指示器位置对应的值
                        final currentOffset = scrollController.offset;
                        // 根据滚动位置计算当前值，精确到小数点后一位
                        final newValue =
                            ((currentOffset / tickWidth).round() / 10).clamp(0.0, 10.0);

                        // 获取当前缓存的值
                        final currentValue = getCurrentValue();

                        // 更新值
                        if (newValue != currentValue) {
                          // 将小数值转换为整数值（乘以10）再传递给逻辑层
                          logic.setRatingValue((newValue * 10).round());

                          // 滚动到精确的刻度位置
                          WidgetsBinding.instance.addPostFrameCallback((_) {
                            scrollController.animateTo(
                              newValue * 10 * tickWidth,
                              duration: Duration(milliseconds: 200),
                              curve: Curves.easeOut,
                            );
                          });
                        }
                      } else if (scrollNotification
                          is ScrollUpdateNotification) {
                        // 在滚动过程中实时更新显示的值
                        final currentOffset = scrollController.offset;
                        final newValue =
                            ((currentOffset / tickWidth).round() / 10).clamp(0.0, 10.0);

                        // 获取当前缓存的值
                        final currentValue = getCurrentValue();

                        if (newValue != currentValue) {
                          // 将小数值转换为整数值（乘以10）再存储
                          logic.userAnswers[questionId] = [(newValue * 10).round()];
                        }
                      }
                      return false;
                    },
                    child: SingleChildScrollView(
                      controller: scrollController,
                      scrollDirection: Axis.horizontal,
                      physics: const BouncingScrollPhysics(),
                      child: Container(
                        // 设置足够宽的容器，使刻度可以超出屏幕
                        // 11个数值(0-10)，每个值占用valueWidth的宽度
                        width: valueWidth * 11 + padding * 2, // 确保加上左右内边距
                        // 添加左右内边距，确保0和10的刻度可以滚动到中心位置
                        padding: EdgeInsets.symmetric(horizontal: padding),
                        child: CustomPaint(
                          painter: ScalePainter(
                            selectedValue: currentValue,
                            tickSpacing: tickWidth,
                          ),
                          size: Size(valueWidth * 11, 76.w),
                        ),
                      ),
                    ),
                  );
                });
              }),
            ],
          ),
        ),

        SizedBox(height: 24.w),
      ],
    );
  }

  double getCurrentValue() {
    final questionId = logic.currentQuestion?.id ?? 0;
    // 将存储的整数值转换回小数（除以10）
    final value = logic.userAnswers[questionId]?.firstOrNull ?? 0;
    return value / 10;
  }
}

// 刻度绘制器
class ScalePainter extends CustomPainter {
  final double selectedValue;
  final double tickSpacing;

  ScalePainter({required this.selectedValue, required this.tickSpacing});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = AppColor.colorE4EBF0
      ..strokeWidth = 1.0
      ..style = PaintingStyle.stroke;

    final textPaint = TextPainter(
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
    );

    // 总共有11个大刻度（0-10），每个大刻度之间有9个小刻度（精确到小数点后一位）
    final totalTicks = 11 * 10 - 1; // 0, 0.1, 0.2, ... 10.0

    // 绘制所有刻度线和数字
    for (int i = 0; i <= totalTicks; i++) {
      final x = i * tickSpacing;
      final value = i / 10; // 将刻度转换为实际值（0-10，精确到小数点后一位）
      final isLongTick = i % 10 == 0; // 每10个刻度（即整数位置）是长刻度
      final isMediumTick = i % 5 == 0 && !isLongTick; // 每5个刻度（即0.5的位置）是中等刻度

      // 确定刻度线高度
      double tickHeight;
      if (isLongTick) {
        tickHeight = 20.0;
      } else if (isMediumTick) {
        tickHeight = 15.0;
      } else {
        tickHeight = 10.0;
      }

      // 绘制刻度线 - 从底部向上绘制
      canvas.drawLine(
        Offset(x, size.height),
        Offset(x, size.height - tickHeight),
        paint,
      );

      // 只在长刻度（整数位置）上绘制数字
      if (isLongTick) {
        // 准备文本
        final textStyle = TextStyle(
          color: AppColor.color8C92A3,
          fontSize: 14.0,
          fontWeight: FontWeight.w400,
        );

        final textSpan = TextSpan(
          text: value.toInt().toString(),
          style: textStyle,
        );

        textPaint.text = textSpan;
        textPaint.layout();

        // 计算文本位置，使其居中于刻度线上方
        final textX = x - textPaint.width / 2;
        final textY =
            size.height - tickHeight - textPaint.height - 4; // 刻度线上方位置

        // 绘制文本
        textPaint.paint(canvas, Offset(textX, textY));
      }
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

// /// 滑动刻度组件
// ///
// /// 一个可以通过滑动来选择数值的刻度组件，支持0-10的刻度范围
// class SwipeScaleWidget extends StatefulWidget {
//   /// 当前选中的值
//   final int value;
//
//   /// 值变化回调
//   final Function(int) onValueChanged;
//
//   /// 最大值
//   final int maxValue;
//
//   /// 是否显示指示器
//   final bool showIndicator;
//
//   const SwipeScaleWidget({
//     super.key,
//     required this.value,
//     required this.onValueChanged,
//     this.maxValue = 10,
//     this.showIndicator = true,
//   });
//
//   @override
//   State<SwipeScaleWidget> createState() => _SwipeScaleWidgetState();
// }
//
// class _SwipeScaleWidgetState extends State<SwipeScaleWidget> {
//   late ScrollController _scrollController;
//
//   @override
//   void initState() {
//     super.initState();
//     _scrollController = ScrollController();
//
//     // 初始化时滚动到当前值的位置
//     WidgetsBinding.instance.addPostFrameCallback((_) {
//       _scrollToValue(widget.value);
//     });
//   }
//
//   @override
//   void didUpdateWidget(SwipeScaleWidget oldWidget) {
//     super.didUpdateWidget(oldWidget);
//     if (oldWidget.value != widget.value) {
//       _scrollToValue(widget.value);
//     }
//   }
//
//   void _scrollToValue(int value) {
//     if (_scrollController.hasClients) {
//       final valueWidth = 8.w * 5; // 每个数值占用的宽度（每个数值有5个刻度）
//       _scrollController.animateTo(
//         value * valueWidth,
//         duration: Duration(milliseconds: 300),
//         curve: Curves.easeOut,
//       );
//     }
//   }
//
//   @override
//   void dispose() {
//     _scrollController.dispose();
//     super.dispose();
//   }
//
//   @override
//   Widget build(BuildContext context) {
//     return Column(
//       mainAxisAlignment: MainAxisAlignment.center,
//       children: [
//         // 第一部分：指示器 (5/10)
//         if (widget.showIndicator)
//           Row(
//             mainAxisAlignment: MainAxisAlignment.center,
//             children: [
//               Text(
//                 "${widget.value}",
//                 style: TextStyle(
//                   fontSize: 60.sp,
//                   fontWeight: FontWeight.w700,
//                   color: AppColor.color0C0A09,
//                 ),
//               ),
//               Text(
//                 "/${widget.maxValue}",
//                 style: TextStyle(
//                   fontSize: 16.sp,
//                   fontWeight: FontWeight.w400,
//                   color: AppColor.color0C0A09.withOpacity(0.5),
//                 ),
//               ),
//             ],
//           ),
//
//         if (widget.showIndicator)
//           SizedBox(height: 8.w),
//
//         // 第二部分和第三部分：刻度数字和刻度线
//         SizedBox(
//           height: 76.w,
//           width: double.infinity,
//           child: Stack(
//             alignment: Alignment.center,
//             children: [
//               // 中间固定的刻度指示器
//               Container(
//                 width: 1.w,
//                 height: 76.w,
//                 color: AppColor.color0C0A09,
//               ),
//
//               // 可滚动的刻度和数字
//               Builder(
//                 builder: (BuildContext context) {
//                   // 计算单个刻度的宽度
//                   final tickWidth = 8.w;
//                   // 计算每个数值占用的宽度（每个数值有5个刻度）
//                   final valueWidth = tickWidth * 5;
//                   // 计算内边距（屏幕宽度的一半）
//                   final padding = MediaQuery.of(context).size.width / 2;
//
//                   return GestureDetector(
//                     onTapDown: (details) {
//                       _handleTapOrDrag(context, details.globalPosition, valueWidth, padding);
//                     },
//                     onHorizontalDragUpdate: (details) {
//                       _handleTapOrDrag(context, details.globalPosition, valueWidth, padding);
//                     },
//                     child: SingleChildScrollView(
//                       controller: _scrollController,
//                       scrollDirection: Axis.horizontal,
//                       physics: const ClampingScrollPhysics(),
//                       child: Container(
//                         // 设置足够宽的容器，使刻度可以超出屏幕
//                         // 11个数值(0-10)，每个值占用valueWidth的宽度
//                         width: valueWidth * (widget.maxValue + 1),
//                         // 添加左右内边距，确保0和10的刻度可以滚动到中间位置
//                         padding: EdgeInsets.symmetric(horizontal: padding),
//                         child: CustomPaint(
//                           painter: ScalePainter(
//                             selectedValue: widget.value,
//                             tickSpacing: tickWidth,
//                             maxValue: widget.maxValue,
//                           ),
//                           size: Size(valueWidth * (widget.maxValue + 1), 76.w),
//                         ),
//                       ),
//                     ),
//                   );
//                 }
//               ),
//             ],
//           ),
//         ),
//       ],
//     );
//   }
//
//   // 处理点击或拖动事件
//   void _handleTapOrDrag(
//     BuildContext context,
//     Offset globalPosition,
//     double valueWidth,
//     double padding
//   ) {
//     final RenderBox box = context.findRenderObject() as RenderBox;
//     final localPosition = box.globalToLocal(globalPosition);
//
//     // 获取屏幕中心点位置
//     final centerX = MediaQuery.of(context).size.width / 2;
//
//     // 计算用户点击位置与中心点的偏移
//     final offset = localPosition.dx - centerX;
//
//     // 获取当前滚动位置
//     final scrollOffset = _scrollController.offset;
//
//     // 计算新的滚动位置，确保可以滚动到最大值
//     final maxScroll = valueWidth * widget.maxValue.toDouble();
//     final newScrollOffset = (scrollOffset + offset).clamp(0.0, maxScroll);
//
//     // 计算对应的值（0-maxValue）
//     final value = (newScrollOffset / valueWidth).round().clamp(0, widget.maxValue);
//
//     // 通知父组件值变化
//     widget.onValueChanged(value);
//
//     // 滚动到对应的位置（确保刻度对齐中心指示器）
//     _scrollController.animateTo(
//       value * valueWidth,
//       duration: Duration(milliseconds: 300),
//       curve: Curves.easeOut,
//     );
//   }
// }
//
// /// 绘制刻度的自定义画笔
// class ScalePainter extends CustomPainter {
//   final int selectedValue;
//   final double tickSpacing;
//   final int maxValue;
//
//   ScalePainter({
//     required this.selectedValue,
//     required this.tickSpacing,
//     required this.maxValue,
//   });
//
//   @override
//   void paint(Canvas canvas, Size size) {
//     final paint = Paint()
//       ..color = AppColor.colorE4EBF0
//       ..strokeWidth = 1.0
//       ..style = PaintingStyle.stroke;
//
//     final textPainter = TextPainter(
//       textDirection: TextDirection.ltr,
//       textAlign: TextAlign.center,
//     );
//
//     // 总共有(maxValue+1)个大刻度（0-maxValue），每个大刻度之间有4个小刻度
//     final totalTicks = (maxValue + 1) * 5 - 1;
//
//     // 绘制所有刻度线和数字
//     for (int i = 0; i <= totalTicks; i++) {
//       final x = i * tickSpacing;
//       final value = i / 5; // 将刻度转换为实际值（0-maxValue）
//       final isLongTick = i % 5 == 0; // 每5个刻度（即整数位置）是长刻度
//
//       // 确定刻度线高度
//       final tickHeight = isLongTick ? 20.0 : 10.0;
//
//       // 绘制刻度线 - 从底部向上绘制
//       canvas.drawLine(
//         Offset(x, size.height),
//         Offset(x, size.height - tickHeight),
//         paint,
//       );
//
//       // 只在长刻度（整数位置）上绘制数字
//       if (isLongTick) {
//         // 准备文本
//         final textStyle = TextStyle(
//           color: AppColor.color8C92A3,
//           fontSize: 14.0,
//           fontWeight: FontWeight.w400,
//         );
//
//         final textSpan = TextSpan(
//           text: value.toInt().toString(),
//           style: textStyle,
//         );
//
//         textPainter.text = textSpan;
//         textPainter.layout();
//
//         // 计算文本位置，使其居中于刻度线上方
//         final textX = x - textPainter.width / 2;
//         final textY = size.height - tickHeight - textPainter.height - 4; // 刻度线上方位置
//
//         // 绘制文本
//         textPainter.paint(canvas, Offset(textX, textY));
//       }
//     }
//   }
//
//   @override
//   bool shouldRepaint(CustomPainter oldDelegate) {
//     return true;
//   }
// }
